<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式标签</title>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<p>代码作用说明</p>
<p>　　HTML中的样式标签，主要是给一些网页内容添加一些的别的效果</p>
<fieldset>
<legend>代码示例与效果</legend>
<p>　　<b>b</b>:加粗 　　代码示例：&lt;b&gt;代码效果&lt;/b&gt; 　　 代码效果：<b>代码效果</b></p>
<p>　　<b>strong</b>:类似加粗 　　代码示例：&lt;strong&gt;代码效果&lt;/strong&gt; 　　 代码效果：<strong>代码效果</strong></p>
<p>　　<b>i</b>:斜体　　代码示例：&lt;i&gt;代码效果&lt;/i&gt; 　　 代码效果：<i>代码效果</i></p>
<p>　　<b>em</b>:类似斜体　　代码示例：&lt;em&gt;代码效果&lt;/em&gt; 　　 代码效果：<em>代码效果</em></p>
<p>　　<b>u</b>:下划线　　代码示例：&lt;u&gt;代码效果&lt;/u&gt; 　　 代码效果：<u>代码效果</u></p>
<p>　　<b>del</b>:删除线　　代码示例：&lt;del&gt;代码效果&lt;/del&gt; 　　 代码效果：<del>代码效果</del></p>
<p>　　<b>big</b>:字体变大　　代码示例：&lt;big&gt;代码效果&lt;/big&gt; 　　 代码效果：<big>代码效果</big></p>
<p>　　<b>small</b>:字体变小　　代码示例：&lt;small&gt;代码效果&lt;/small&gt; 　　 代码效果：<small>代码效果</small></p>
<p>　　<b>sub</b>:下标　　代码示例：代码&lt;sub&gt;效果&lt;/sub&gt; 　　 代码效果：代码<sub>效果</sub></p>
<p>　　<b>sup</b>:上标　　代码示例：代码&lt;sup&gt;效果&lt;/sup&gt; 　　 代码效果：代码<sup>效果</sup></p>
</fieldset>
<hr/>
<p>分组标签</p>
<fieldset><legend><button>代码效果</button></legend>
<p>　　代码示例：&lt;fieldset&gt;&lt;legend&gt;&lt;button&gt;代码效果&lt;/button&gt;&lt;/legend&gt;&lt;/fieldset&gt;</p>
<p>　　补充：分组标签和legend组标题都相当于一个容器，里面可以放下任何东西；如：按钮、超链接、表格</p>
</fieldset>
<p>组合标签</p>
<p>　　dl dd 组合表格标签 必须一起使用才有意义</p>
<p>　　dl为1级组合标签 dt为2级组合标签 dd为3级组合标签</p>
<p>　　代码示例：&lt;dl&gt;
    &lt;dt&gt;中国城市 &lt;/dt&gt;
    &lt;dd&gt;广州&lt;/dd&gt;
    &lt;dd&gt;长沙&lt;/dd&gt;
    &lt;dd&gt;云南&lt;/dd&gt;

&lt;/dl&gt;</p>
<p>代码效果：<dl>
    <dt>中国城市</dt>
    <dd>广州</dd>
    <dd>长沙</dd>
    <dd>云南</dd>

</dl></p>
<hr/>
<p>热点地图</p>
<p>代码示例：<pre>&lt;img src="../img/xd.jpg"  width="500" usemap="#xd"&gt;(usemap后面命名需要加#)
    &lt;map name="xd"&gt;
        &lt;area title="区域" shape="rect" coords="220,80,80,80" href="submit.html"&gt;
        &lt;area title="区域" shape="circle" coords="65,220,30" href="_top.html"&gt;
    &lt;/map&gt;</pre></p>
<p>代码效果：</p>
<p><img src="../img/xd.jpg"  width="500" usemap="#xd">
<map name="xd">
    <area title="区域" shape="rect" coords="220,80,80,100" href="submit.html">
    <area title="区域" shape="circle" coords="65,220,30" href="_top.html">
</map></p>
<p>　　补充：usemap是一个热点属性标签，可以制作热点地图</p>
<p>　　shape为热点形状，有属性rect矩形，circle圆形，poly多边形；</p>
<p>　　coords为热点坐标：</p>
<p>　　rect 坐标起点[x,y]坐标终点[x,y]</p>
<p>　　circle [x,y r] r为圆的半径</p>
<p>　　poly多边形 各点的坐标组成</p>
</body>
</html>